<template>
  <div class="body">
    <!-- <a class="logo" href="https://www.htu.edu.cn/" style="margin-top: 20px;margin-left: 30px;"></a> -->
    <div id="contetnt">
        <div id="title"><h1 style="float:left;margin-left: 600px;">ikun论坛后台管理系统</h1></div>
        <div class="login">
    
    <el-form ref="form" :model="form" label-width="80px" :rules="rules" >
      <el-form-item label="用户名:" prop="username">
       <el-input v-model="form.username" prefix-icon="el-icon-user-solid"
       placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item label="密 码:" prop="password">
        <el-input type="password" v-model="form.password" show-password="true"
         prefix-icon="el-icon-lock" placeholder="请输入密码"> </el-input>
      </el-form-item>
      <el-form-item >
         <el-button type="primary" id="login-button" size="big" @click="tologin">登  录</el-button>
      </el-form-item>
    </el-form>
     <router-link :to="{name:'register'}">没有账号？立即注册</router-link>
 </div>
    </div>
</div>
 
</template>

<script>
import Cookie from 'cookiejs'
import reqLogin from '@/api/login/login'
export default {
  data(){
    return{
        form:{
           username:'',
           password:''
        },
        rules:{
            username:[
                {required:true, message:'请输入用户名', trigger: 'blur'}
            ],
            password:[
                {required:true, message:'请输入密码',  trigger: 'blur'}
            ]
        }
    }
  },
  methods:{
    async  tologin(){
        //登录
        //调用后端接口，传过来一个token,将token存入cookie中
        
        const res = await  reqLogin.login(this.form.username,this.form.password)
        if(res.code==200){
          //登录成功
          const token = res.data.token
          
          const userinfo = res.data.userinfo
         
          const user =  JSON.parse(userinfo).user
           //将user信息存入store中
          this.$store.state.userinfo.user = user
         
          //存入state
          this.$store.commit('saveToken',token)

         // console.log(this.$store.state.userinfo)

        //存入Cookie
          // Cookie.set('token',token)
          sessionStorage.setItem('token',token)
           //跳转至首页
           //判断跳转哪个首页
           if(this.$store.state.userinfo.user.role==3){
            this.$router.push('/homeadmin')
           }else if(this.$store.state.userinfo.user.role==2){
            this.$router.push('/homeshe')
           }else{
            this.$router.push('/home')
           }
           
            this.$message({
             message: '登录成功！',
             type: 'success'
           });
        }else{
          this.$message(res.message)
        }
          

        // //模拟token
        // if(this.form.username==='admin'&&this.form.password==='123456'){
        //       const token ='jjh-login-2023-03-09'
        //  //存入cookie
        //  Cookie.set('token',token)
        // //跳转到首

        // this.$router.push('/home')
        // this.$message({
        //   message: '登录成功！',
        //   type: 'success'
        // });
        // }else{
        //     this.$message('账号或密码错误，请重试！')
        // }
      
    }
  }
}
</script>

<style lang="less" scoped>
// .el-form{
//   background-color: rgba(11, 11, 11, 0.2);
// }
//logo图片
.logo {
    width: 245px;
    height: 80px;
    background: url(../../assets/pcLogo.png) no-repeat 0px center scroll;
     float: left;

}
 .body{
  background: url("../../assets/background.png") no-repeat center center;
  width:100%;
  height: 100%;
  background-size:cover;
  position:absolute;

 }

 #title{
    width:100%;
    height: 50px;
    text-align: center;
    padding-top: 50px;
 }


   .login{
    padding-top: 40px;
    width:450px;
    height: 300px;
    margin: 0 auto;
    margin-top: 80px;
    border: 1px solid rgba(11, 11, 11, 0.2);
    border-radius: 20px;
    box-shadow:  10px 10px  10px  rgba(44, 43, 43,0.4);
    background-color: rgba(255, 255, 255, 0.58);
    text-align: center;
    #login-button{
        margin-right: 50px;

    }
    .el-form-item{
        margin-top: 40px;
        line-height: 40px;
        width: 400px;
    }
    .el-button{
      width:285px;
      height: 45px;
      border-radius: 10px;
      font-weight: 700;
    }
    input{
      height: 50px;
    }
   }
</style>